import React from 'react'
import './listItem.scss'
// import { contentList } from '../../actions/contentListActions'
import { connect } from 'react-redux'
import StarScore from 'component/StarScore/startScore.jsx'
class listItem extends React.Component {
  constructor(props) {
    super(props)
  }
  renderMeiTuanFlag(data) {
    if (data.delivery_type) {
      return <div className="item-meituan-flag">美团专送</div>
    }
    return null
  }
  renderOthers(data) {
    let len = data.discounts2.length
    if (len) {
      return data.discounts2.map((ele, index) => {
        return (
          <div key={index} className="other-info">
            <img src={ele.icon_url} className="other-tag" alt="" />
            <div className="other-content">{ele.info}</div>
          </div>
        )
      })
    }
  }
  renderMonthNum(data) {
    let num = data.month_sale_num
    if (num > 999) {
      return '999+'
    } else {
      return num
    }
  }
  renderBrand(data) {
    if (data.brand_type) {
      return <div className="brand brand-pin">品牌</div>
    } else {
      return <div className="brand brand-xin">新到</div>
    }
  }
  render() {
    let data = this.props.itemData
    return (
      <div className="r-item-content scale-1px">
        <img className="item-img" src={data.pic_url} alt="" />
        {this.renderBrand(data)}
        <div className="item-info-content">
          <p className="item-title">{data.name}</p>
          <div className="item-desc">
            <div className="item-score">
              <StarScore score={data.wm_poi_score} />
            </div>
            <div className="item-count">月售 {this.renderMonthNum(data)}</div>
            <div className="item-distance">
              &nbsp;
              {data.distance}
            </div>
            <div className="item-time">
              {data.mt_delivery_time}
              &nbsp;|
            </div>
          </div>
          <div className="item-price">
            <div className="item-pre-price">{data.min_price_tip}</div>
            {this.renderMeiTuanFlag(data)}
          </div>
          <div className="item-others">{this.renderOthers(data)}</div>
        </div>
      </div>
    )
  }
}

export default connect()(listItem)
